import React from "react";
import { Responsive, WidthProvider, Layout } from "react-grid-layout";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";

const ResponsiveGridLayout = WidthProvider(Responsive);

// 定义布局项的类型
interface LayoutItem {
    i: string;
    x: number;
    y: number;
    w: number;
    h: number;
    minW?: number;
    minH?: number;
}

// 定义完整的布局类型
type LayoutsType = {
    [key: string]: LayoutItem[];
};

const EditorLayout: React.FC = () => {
    // 定义布局配置 - 使用 TypeScript 类型
    const layouts: LayoutsType = {
        lg: [
            // 左侧区域 A - 总共2列宽度
            { i: "a1", x: 0, y: 0, w: 2, h: 6, minW: 1, minH: 3 },
            { i: "a3", x: 0, y: 6, w: 2, h: 6, minW: 1, minH: 3 },

            // 中间区域 B - 总共4列宽度
            { i: "b1", x: 2, y: 0, w: 4, h: 4, minW: 2, minH: 2 },
            { i: "b2", x: 2, y: 4, w: 4, h: 4, minW: 2, minH: 2 },
            { i: "b3", x: 2, y: 8, w: 4, h: 4, minW: 2, minH: 2 },

            // 右侧区域 C - 总共2列宽度
            { i: "c1", x: 6, y: 0, w: 2, h: 6, minW: 1, minH: 3 },
            { i: "c2", x: 6, y: 6, w: 2, h: 6, minW: 1, minH: 3 },
        ],
    };

    // 处理布局变化
    const handleLayoutChange = (
        currentLayout: Layout[],
        allLayouts: LayoutsType,
    ) => {
        console.log("布局发生变化:", currentLayout);
        // 可以在这里保存布局状态到本地存储或后端
    };

    // 处理拖拽开始
    const onDragStart = (
        layout: Layout[],
        oldItem: Layout,
        newItem: Layout,
        placeholder: Layout,
        e: MouseEvent,
        element: HTMLElement,
    ) => {
        console.log("开始拖拽:", oldItem.i);
    };

    // 处理拖拽停止
    const onDragStop = (
        layout: Layout[],
        oldItem: Layout,
        newItem: Layout,
        placeholder: Layout,
        e: MouseEvent,
        element: HTMLElement,
    ) => {
        console.log("拖拽结束:", newItem.i, "新位置:", newItem.x, newItem.y);
    };

    // 处理调整大小
    const onResize = (
        layout: Layout[],
        oldItem: Layout,
        newItem: Layout,
        placeholder: Layout,
        e: MouseEvent,
        element: HTMLElement,
    ) => {
        console.log(
            "调整大小:",
            newItem.i,
            "新尺寸:",
            newItem.w,
            "x",
            newItem.h,
        );
    };

    return (
        <div style={containerStyle}>
            <h2 style={titleStyle}>可拖拽编辑器布局 (TypeScript)</h2>

            <ResponsiveGridLayout
                className="layout"
                layouts={layouts}
                breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
                cols={{ lg: 8, md: 6, sm: 4, xs: 2, xxs: 1 }}
                rowHeight={60}
                isDraggable={true}
                isResizable={true}
                autoSize={true}
                margin={[10, 10]}
                onLayoutChange={handleLayoutChange}
                onDragStart={onDragStart}
                onDragStop={onDragStop}
                onResize={onResize}
                compactType={null} // 禁用自动紧凑排列
                preventCollision={false} // 允许重叠
            >
                {/* 左侧区域 */}
                <div key="a1" style={getItemStyle("#ffcccc")}>
                    <LayoutHeader title="A1 上部" />
                    <LayoutContent content="左侧上部内容区域" />
                </div>
                <div key="a3" style={getItemStyle("#ffddcc")}>
                    <LayoutHeader title="A3 下部" />
                    <LayoutContent content="左侧下部内容区域" />
                </div>

                {/* 中间区域 */}
                <div key="b1" style={getItemStyle("#ccffcc")}>
                    <LayoutHeader title="B1 上部" />
                    <LayoutContent content="中间上部内容区域" />
                </div>
                <div key="b2" style={getItemStyle("#ddffdd")}>
                    <LayoutHeader title="B2 中部" />
                    <LayoutContent content="中间中部内容区域" />
                </div>
                <div key="b3" style={getItemStyle("#eeffee")}>
                    <LayoutHeader title="B3 下部" />
                    <LayoutContent content="中间下部内容区域" />
                </div>

                {/* 右侧区域 */}
                <div key="c1" style={getItemStyle("#ccccff")}>
                    <LayoutHeader title="C1 上部" />
                    <LayoutContent content="右侧上部内容区域" />
                </div>
                <div key="c2" style={getItemStyle("#ddddff")}>
                    <LayoutHeader title="C2 下部" />
                    <LayoutContent content="右侧下部内容区域" />
                </div>
            </ResponsiveGridLayout>
        </div>
    );
};

// 子组件定义
interface LayoutHeaderProps {
    title: string;
}

const LayoutHeader: React.FC<LayoutHeaderProps> = ({ title }) => {
    return <div style={headerStyle}>{title}</div>;
};

interface LayoutContentProps {
    content: string;
}

const LayoutContent: React.FC<LayoutContentProps> = ({ content }) => {
    return <div style={contentStyle}>{content}</div>;
};

// 样式定义
const containerStyle: React.CSSProperties = {
    padding: "20px",
    background: "#f0f2f5",
    minHeight: "100vh",
};

const titleStyle: React.CSSProperties = {
    marginBottom: "20px",
    textAlign: "center" as const,
    color: "#333",
};

const getItemStyle = (bgColor: string): React.CSSProperties => ({
    background: bgColor,
    borderRadius: "8px",
    boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
    overflow: "hidden",
    border: "1px solid #ddd",
});

const headerStyle: React.CSSProperties = {
    background: "rgba(0,0,0,0.1)",
    padding: "12px",
    fontWeight: "bold",
    borderBottom: "1px solid rgba(0,0,0,0.1)",
    fontSize: "14px",
};

const contentStyle: React.CSSProperties = {
    padding: "16px",
    height: "calc(100% - 45px)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "12px",
    color: "#666",
};

export default EditorLayout;
